<template>
  <div class="box">
    <div class="header">
      <input
        type="text"
        placeholder="请输入待办项"
        v-model="todo"
        v-on:keyup.enter="addTodo"
      />
    </div>
    <div class="main">
      <div class="main-left">
        <img src="../assets/userimg.webp" class="left-image" />
        <div class="left-title active" @click="toggleTag(1, $event)">
          <i class="bi bi-bookmark-dash-fill bookmark-dash-icon"></i> 待完成（{{
            statusCount.waitForCount
          }}）
        </div>
        <div class="left-title" @click="toggleTag(2, $event)">
          <i class="bi bi-bookmark-check-fill bookmark-icon"></i> 已完成（{{
            statusCount.completedCount
          }}）
        </div>
        <div class="left-title" @click="toggleTag(3, $event)">
          <i class="bi bi-trash-fill trash-icon"></i> 回收站（{{
            statusCount.recycleBinCount
          }}）
        </div>
        <div class="left-title" @click="newzhengce($event)">
          <i class="bi bi-star-fill fill-icon"></i>
          政府要闻
        </div>
      </div>
      <div class="main-right">
        <div
          class="right-item"
          v-if="todomvc"
          v-for="(item, index) in toDoList"
          :key="index"
        >
          <!-- 左侧待办名称和完成按钮 -->
          <div v-if="item.editUpdate" @dblclick="updateTodo(item)">
            <!-- 完成图标 -->
            <i
              v-show="item.status === 1"
              class="bi bi-clipboard-check item-icon"
              title="完成"
              @click="completeTodo(item)"
            ></i>
            {{ item.content }}
          </div>
          <!-- 待办右侧时间和删除 -->
          <div v-if="item.editUpdate">
            {{ item.createTime }}
            <i class="bi bi-trash item-icon" @click="removeTodo(item)"></i>
          </div>
          <!-- 修改待办输入框 -->
          <div v-if="!item.editUpdate" class="maxwidth">
            <input
              type="text"
              v-model="item.content"
              class="todoupdateinput"
              v-autofocus
              @blur="
                item.editUpdate = true;
                resoveTo(item);
              "
              v-on:keyup.enter="saveToEdit(item)"
            />
          </div>
        </div>

        <div v-else class="right-item" v-for="(item, index) in newDatalist">
          <div class="newtitlestyle">
            <a :href="item.url" target="_blank" :title="item.title">{{
              item.title
            }}</a>
          </div>
          <div>{{ item.date }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { reactive, toRefs, onMounted } from "vue";
import http from "axios";
import { getAllTodo } from "./mvcfun/getAllTodo";
import { getStatusCount } from "./mvcfun/getStatusCount";

export default {
  directives: {
    // 自定义指令
    autofocus: {
      mounted(el, binding) {
        el.focus();
      },
    },
  },
  setup() {
    const data = reactive({
      // 输入框绑定值
      todo: "",
      // 当前的查询状态
      nowStatus: 1,
      // 待办列表
      toDoList: [],
      // 各状态总数
      statusCount: {
        waitForCount: 0,
        completedCount: 0,
        recycleBinCount: 0,
      },
      newDatalist: [],
      todomvc: true,
    });

    // 查询全部的方法
    const getall = () => {
      // 获取全部待办
      getAllTodo(data.nowStatus).then((res) => {
        data.toDoList = res.data.result || [];
        getStatusCount().then((count) => {
          data.statusCount = count.data.result;
        });
      });
    };

    // 页面加载触发
    onMounted(() => {
      getall();
    });

    const methods = {
      // 添加todo方法
      addTodo() {
        data.todo = data.todo.replace(/\s*/g, "");
        if (!data.todo) return;
        let postdata = {
          // 待办内容
          content: data.todo,
          // 创建时间
          createTime: "2020-04-19 13:12",
          // 是否正常显示，true为正常显示，false表示编辑中
          editUpdate: true,
          // 待办状态，1：未完成，2：已完成，3：回收站
          status: 1,
        };
        http.post("/api/addTodo", postdata).then(() => {
          data.todo = "";
          getall();
        });
      },
      // 修改todo方法
      updateTodo(item) {
        // 如果不是待完成的不能修改
        if (item.status !== 1) return;
        item.editUpdate = false;
        item.beforTodo = item.content;
      },
      // 失去焦点还原原有值
      resoveTo(item) {
        item.content = item.beforTodo;
      },
      // 保存方法
      saveToEdit(item) {
        console.log(item);
        http.post("/api/updateTodo", item).then((res) => {
          item.editUpdate = true;
          getall();
        });
      },
      // 单个已完成方法
      completeTodo(item) {
        item.status = 2;
        http.post("/api/updateStatus", item).then((_) => {
          getall();
        });
      },
      // 切换左侧标签方法
      toggleTag(status, el) {
        data.todomvc = true;
        // 清空全部的选中
        this.toggleLeftView();
        el.target.classList.add("active");
        data.nowStatus = status;
        // 查询全部
        getall();
      },
      // 处理左侧选中方法
      toggleLeftView() {
        let leftviews = document.querySelectorAll(".main-left>.left-title");
        leftviews.forEach((item) => {
          item.classList = "left-title";
        });
      },
      // 删除待办,将待办放进回收站
      removeTodo(item) {
        if (item.status === 3) {
          this.removeSaveTodo(item);
        } else {
          item.status = 3;
          http.post("/api/updateStatus", item).then((_) => {
            getall();
          });
        }
      },
      // 从回收站彻底删除待办
      removeSaveTodo(item) {
        http.post("/api/deleteTodo", item).then((_) => {
          getall();
        });
      },
      // 获取最新要闻
      newzhengce(el) {
        // 清空全部的选中
        this.toggleLeftView();
        el.target.classList.add("active");
        http.get("/api/newzhengce").then((res) => {
          data.todomvc = false;
          data.newDatalist = res.data;
        });
      },
    };

    return {
      ...toRefs(data),
      ...methods,
    };
  },
};
</script>

